<template>
	<div class="galary-content">
		<div class="wrapper">
			<div class="imgWrapper" 
			v-for="item of imgList[this.index][this.index]"
			:id="item.id"
			>
				<img :src="item.imgUrl" @click="handelClick">
			</div>
		</div>
		<div class="galary" v-show="show" :length="length">
			<swiper ref="mySwiper"  :options="swiperOption" >
			   <swiper-slide v-for="item of imgList[this.index][this.index]" :key="item.id">
				   <div class="galary-desc">{{parseInt(item.id)+1}}/{{length}}</div>
				   <div class="galary-img">
					   <img :src="item.imgUrl"  >
				   </div> 
				   <div class="cancelBtn" @click="handelX">X</div>
			   </swiper-slide>
			 </swiper>
		</div>
	</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'galaryContent',
  computed:mapState(['index']),
  methods:{
  	 handelClick(){
		 this.length = this.imgList[this.index][this.index].length
  		 this.show = true
  	 },
  	 handelX(){
  		 this.show = false
  	 }
  },
  data(){
	  return{
			length:1,
			swiperOption:{
				loop:false
			},
			show:false,
		  imgList:[
				       {
				         "0":[
				           {
				           "id":"0",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"1",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"2",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"3",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"4",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"5",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"6",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"7",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         }
				         
				         ]
				       },
				       {
				         "1":[
				           {
				           "id":"0",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"1",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"2",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"3",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"4",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"5",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"6",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"7",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         }
				         
				         ]
				       },
				       {
				         "2":[
				           {
				           "id":"0",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"1",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"2",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"3",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"4",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"5",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         },
				         {
				           "id":"6",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-ARCPJAAKRqsCY21E518_320x160_00.jpg"
				         },
				         {
				           "id":"7",
				           "imgUrl":"https://pic5.40017.cn/01/001/cf/f6/rBLkBVp0IB-AfevzAAKQm68EeKQ361_320x160_00.jpg"
				         }
				         
				         ]
				       }
				     ]
  }
 }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
    background:#FFFFFF
    .imgWrapper
      width:47%
      background:#aaa
      margin:.12rem
      float:left
    .imgWrapper>img
      width:100%
.galary
  position:absolute
  top:-0.86rem
  left:0
  right:0
  bottom:0
  background:#000
  color:#fff
  .galary-img
    margin-top:4.5rem
  .galary-img>img
    width:100%
  .galary-desc
    text-align:center
	top:5rem 
  .cancelBtn
    font-size:.5rem
    text-align:center 
    // margin-top:3.5rem 
    // color:#FFFFFF 
</style>
